<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX学院新闻网</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="登录.css">
</head>
<script type="text/javascript">
    window.onload = function(){
        createCode(4); //初始化验证码
        var oInput = document.getElementById('pwd');
        oInput.value = ''; //获取密码
        var submitBtn = document.getElementById("register");
        //以下实现必须接受协议才能提交的功能
        submitBtn.onclick = function () {
        if(!document.getElementById("checkbox").checked) {
            alert("请先接受协议哦(*╹▽╹*)");
            return false;
        }
    };
        var spans = document.getElementsByTagName('span');
        //密码强度的对比
        oInput.onkeyup = function(){
            //强度状态设为默认
            spans[1].className = spans[2].className = spans[3].className = "default";
            var pwd = this.value;
            var result = 0;
            for(var i = 0, len = pwd.length; i < len; ++i){
                result |= charType(pwd.charCodeAt(i));
            }
            var level = 0;
            //对result进行四次循环，计算其level
            for(var i = 0; i <= 4; i++){
                if(result & 1){
                    level ++;
                }
                //右移一位
                result = result >>> 1;
            }

            if(pwd.length >= 6){
                switch (level) {
                    case 1:
                        spans[1].className = "weak";
                        break;
                    case 2:
                        spans[2].className = "medium";
                        spans[1].className = "medium";
                        break;
                    case 3:
                    case 4:
                        spans[3].className = "strong";
                        spans[1].className = "strong";
                        spans[2].className = "strong";
                        break;
                }
            }
        }
    }
    /*
        定义一个函数，对给定的数分为四类(判断密码类型)，返回十进制1，2，4，8
       
    */
    //生成验证码的方法
function createCode(length) {
    var code = "";
    var codeLength = parseInt(length); //验证码的长度
    var checkCode = document.getElementById("checkCode");
    //所有候选组成验证码的字符，当然也可以用中文的
    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
    //循环组成验证码的字符串
    for (var i = 0; i < codeLength; i++)
    {
        //获取随机验证码下标
        var charNum = Math.floor(Math.random() * 62);
        //组合成指定字符验证码
        code += codeChars[charNum];
    }
    if (checkCode)
    {
        //为验证码区域添加样式名
        checkCode.className = "code";
        //将生成验证码赋值到显示区
        checkCode.innerHTML = code;
    }
}
//检查验证码是否正确
function validateCode()
{
    //获取显示区生成的验证码
    var checkCode = document.getElementById("checkCode").innerHTML;
    //获取输入的验证码
    var inputCode = document.getElementById("inputCode").value;
    console.log(checkCode);
    console.log(inputCode);
    if (inputCode.length <= 0)
    {
        alert("验证码忘输惹！我怎么知道你是不是机器人鸭[○･｀Д´･ ○]");
    }
    else if(inputCode.toUpperCase() != checkCode.toUpperCase())
    {
        alert("你验证码输错了哒！￣へ￣");
        createCode(4);
    }
    else 
        return true;     
}    
    function charType(num){
        if(num >= 48 && num <= 57){
            return 1;
        }
        if (num >= 97 && num <= 122) {
            return 2;
        }
        if (num >= 65 && num <= 90) {
            return 4;
        }
        return 8;
    }
    //注册成功提示
    function success() {
        alert('注册成功！欢迎你鸭✿✿ヽ(°▽°)ノ✿ 确认后进入主页!');
    }
   

 
    
    //此处是一个验证函数，必须满足密码大于六位且验证码不为空或者错误的条件，才能注册成功
    function check_code() { 
        var answer= document.getElementById("pwd").value; 
        if(answer.length<6) { alert("密码不能少于六位鸭[○･｀Д´･ ○]"); 
        return false;} 
        else if(!validateCode()) {
                return false;
            }     
        else{
            setTimeout("javascript:location.href='index.html'", 3);
            success();
            
        }
    }
    
 
       
</script>
<style type="text/css">
	
	input[class="input"] {
    width: 300px;                                        
    height: 20px;
    background: whitesmoke;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 7px;
}
    label::before {content: '* ';color: red;} 
    /*整体样式，主要包括背景字体字体颜色等*/
	body{ background-attachment:fixed;color: rgb(0, 0, 0);}
    #app1{width:400px;margin:5px auto;font-size:15px;}
	label{display: inline-block;width:70px;height: 38px;text-align: center;}
	/*输入框样式*/
    .input{width:300px;height: 20px;border-radius: 4px;}
	/*协议框样式*/
    .checkbox{font-size: 14px;margin-left: 20px;}
	/*注册按钮样式*/
    #register{width: 270px;height: 38px;border-radius: 5px;background:rgb(149, 1, 1);border: 1px solid  silver;color: white;font-size: 18px;cursor: pointer;margin-top: 10px;}
	/* #btn{width: 50px;height: 30px;display: inline-block;float: right;margin-right: 15px;} */
    /*以下是密码三个强度对应的颜色*/
    .default {background: #eeeeee;}
    .weak {background: #FF0000;}
    .medium {background: #cfcf24;}
    .strong {background: #33CC00;}
    /*.show使密码强度整个部分向右移动 span是密码强度框的样式*/
    .show {margin-left: 65px;}
     span 
     {
         display: inline-block;
         width: 60px;
         height: 30px;
         line-height: 30px;
         background: #ddd;
         text-align: center;
         margin: 7px 4px ;
    } 
    /*验证码样式*/
     .code
    {
         font-style:italic;
         color:rgb(114, 163, 226);
         font-size:35px;
         border:0;
         margin-left:74px;
         /* padding:2px 3px; */
         letter-spacing:3px;
         font-weight:bolder;            
         float:left;           
         cursor:pointer;
         width:150px;
         height:50px;
         line-height:60px;
         text-align:center;
         /* vertical-align:middle; */
         background-color:pink;
     }
     /*更换验证码-文字样式*/
     .change {
        text-decoration:none;
        font-size:14px;
        color:#555c5c;
        /* padding-left:20px; */
        margin-top: 20px;
     }
     /*更换验证码-鼠标点击文字样式*/
     .change:hover {
        text-decoration:underline;
        cursor:pointer;
    } 
  </style>
<body>
  <body>
    <!-- 弹出登陆框按钮 -->
  
<div class="top_bg"><div class="top">
<p style="float:left;"><img src="images/logoko.png" /></p>
<div class="youce" div id="login-header"><p><a id="adminBtn" href="javascript:void(0)">登录|注册</a> | <a href="http://www.baidu.com/">微信</a> | <a href="http://www.baidu.com/">微博</a></p>
  <div class="sousuo">
  <input name="" type="text" class="sousuo_in" />
  <a href="https://www.jzxy.net.cn/info/160/9749.htm" target="_blank">  <img src="images/logoko2.png" style="float:left;" /></a>
 
</div>
  
</div>
</div></div>
   

    <!-- 登陆框主体 -->
    <div id="login" class="login">
        <!-- 登陆框标题 -->
        <div id="login-title" class="login-title">
           <p style="text-align: center;font-size: 30px; font-family:楷体">欢迎入驻鑫哥大学</p>
           </a> <span><a id="closeBtn"  href="javascript:void(0)"  >逃跑</a></span>
        </div>
        <!-- 登陆框表单 -->
        <div id="login-form">
            <div class="login-input">
                <label>账  号：</label>
                <input type="text" placeholder="请输入用户名/电话/账号" class="list-input"/>
            </div>

            <div class="login-input">
                <label>密  码：</label>
                <input type="password" placeholder="请输入密码" class="list-input"/>
            </div>
        </div>
        <!-- 登陆框登陆按钮 -->
        <a href="index.html">
        <input type="submit"  onclick="alert('登录成功，欢迎回家！')" id="loginSubmit" value="登陆" class="loginSubmit" />
        </a>
        <!-- 注册框登陆按钮 -->
       <div ><p  style="text-align: center; font-family:楷体" >还没有账号？一键<a style="color: aqua;font-family:楷体 " href="注册.html" >注册</a></p></div>      
      </div>         
    <!-- 遮盖层 -->
    <div id="bg" class="bg"></div>
    <script src="登录.js"></script>
    <div class="nav_bg"><div class="nav"><p><a href="index.html">首 页</a><a href="编辑页面.html">新闻编辑</a> <a href="注册.html">  刷新表格</a></p>
</div>


<!--onSubmit="return check_code()"只有满足这个函数才能注册成功-->
<form onSubmit="return check_code()" >
	<div id="app1">
        <!--required限定必须填不能为空-->
		<label >用户名</label><input type="text" required name="name"  placeholder="你想叫什么呢ฅ^•ﻌ•^ฅ" class="input" >        
    <label >性 别</label>
        <input type="radio" name="sex" value="man" checked="true"> 男  <input type="radio" name="sex" value="woman"> 女  <input type="radio" name="sex" value="undefined"> 保密<br>  
		<label >密 码</label><input type="password"id ='pwd' name="pwd" required nBlur="check();" placeholder="密码不能少于六位" class="input"><div class="show">&nbsp;&nbsp;&nbsp;<span>弱</span><span>中</span><span>强</span></div>
        <label>生 日</label><input type="date" value="2000-01-01" class="input">
		<label >手机号</label><input type="text" placeholder="请输入正确的电话号码" required  pattern="^1[3456789]\d{9}$" title="移动电信联通表示没有这个号码(ˉ(∞)ˉ)" class="input" >
		<label>邮 箱</label><input name="email" type="email" required placeholder="qq或者什么都可以~o(=∩ω∩=)m" class="input" >
        <label >验证码</label><input type="text" id="inputCode"  placeholder="请输入验证码" class="input" >
        <div id="checkCode" class="code"  onclick="createCode(4)" ></div>
        <div class="change" onclick="createCode(4)"><p style="color: darkorange;">刷新</P></div><br>
        <div class="checkbox"><input type="checkbox"id="checkbox" onclick="element.disabled=true" style="margin-right: 10px;" >我已阅读并接受<a href="agreement.txt" target="_blank">《朱旺鑫大学入学须知》</a></div>
        &nbsp; &nbsp; <button id="register" input type="submit" >立即注册</button>
    </div>
</div>
</form>


<div class="foot_bg"style="position: fixed;bottom: 0px;"><div class="foot"><div class="foot_p">
  <p style="text-align: center; font-family:楷体">版权所有 © <a href="index-2.html">朱旺鑫大学</a>      联系我们    意见和建议  </p>
  <p style="text-align: center; font-family:楷体">  技术支持:chengpp-QQ2719472391 </p></div>
</div></div>

</body>
</html>